<template>
  <div class="dashboard-container">
    <el-row :gutter="20">
      <!-- 统计卡片 -->
      <el-col :span="6" v-for="(item, index) in statistics" :key="index">
        <el-card shadow="hover" class="statistics-card">
          <div class="card-header">
            <span class="title">{{ item.title }}</span>
            <el-icon class="icon" :style="{ color: item.color }">
              <component :is="item.icon" />
            </el-icon>
          </div>
          <div class="card-body">
            <span class="number">{{ item.value }}</span>
            <span class="unit">{{ item.unit }}</span>
          </div>
          <div class="card-footer">
            <span :class="['trend', item.trend >= 0 ? 'up' : 'down']">
              {{ Math.abs(item.trend) }}%
              <el-icon>
                <component :is="item.trend >= 0 ? 'ArrowUp' : 'ArrowDown'" />
              </el-icon>
            </span>
            <span class="compare">较上周</span>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="mt-20">
      <!-- 设备状态分布 -->
      <el-col :span="12">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>设备状态分布</span>
            </div>
          </template>
          <div ref="deviceStatusChart" style="height: 300px"></div>
        </el-card>
      </el-col>

      <!-- 数据趋势 -->
      <el-col :span="12">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>数据趋势</span>
              <el-radio-group v-model="trendTimeRange" size="small">
                <el-radio-button value="day">今日</el-radio-button>
                <el-radio-button value="week">本周</el-radio-button>
                <el-radio-button value="month">本月</el-radio-button>
              </el-radio-group>
            </div>
          </template>
          <div ref="dataTrendChart" style="height: 300px"></div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="mt-20">
      <!-- 最近活动 -->
      <el-col :span="12">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>最近活动</span>
            </div>
          </template>
          <el-timeline>
            <el-timeline-item
              v-for="(activity, index) in recentActivities"
              :key="index"
              :timestamp="activity.time"
              :type="activity.type"
            >
              {{ activity.content }}
            </el-timeline-item>
          </el-timeline>
        </el-card>
      </el-col>

      <!-- 告警信息 -->
      <el-col :span="12">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>告警信息</span>
            </div>
          </template>
          <el-table :data="alarmList" style="width: 100%">
            <el-table-column prop="device" label="设备" />
            <el-table-column prop="type" label="类型">
              <template #default="{ row }">
                <el-tag :type="row.type === 'error' ? 'danger' : 'warning'">
                  {{ row.type === 'error' ? '错误' : '警告' }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="content" label="内容" />
            <el-table-column prop="time" label="时间" width="180" />
          </el-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { ref, onMounted, onUnmounted } from 'vue'
import * as echarts from 'echarts'
import {
  Monitor,
  Connection,
  Warning,
  DataLine,
  ArrowUp,
  ArrowDown
} from '@element-plus/icons-vue'

export default {
  name: 'Dashboard',
  components: {
    Monitor,
    Connection,
    Warning,
    DataLine,
    ArrowUp,
    ArrowDown
  },
  setup() {
    const deviceStatusChart = ref(null)
    const dataTrendChart = ref(null)
    const trendTimeRange = ref('day')
    let deviceStatusChartInstance = null
    let dataTrendChartInstance = null

    const statistics = ref([
      {
        title: '设备总数',
        value: 128,
        unit: '台',
        icon: 'Monitor',
        color: '#409EFF',
        trend: 5.2
      },
      {
        title: '在线设备',
        value: 98,
        unit: '台',
        icon: 'Connection',
        color: '#67C23A',
        trend: 3.1
      },
      {
        title: '告警设备',
        value: 5,
        unit: '台',
        icon: 'Warning',
        color: '#E6A23C',
        trend: -2.5
      },
      {
        title: '数据量',
        value: 25680,
        unit: '条',
        icon: 'DataLine',
        color: '#909399',
        trend: 8.4
      }
    ])

    const recentActivities = ref([
      {
        content: '设备 "温度传感器-001" 上线',
        time: '10分钟前',
        type: 'success'
      },
      {
        content: '设备 "湿度传感器-002" 数据异常',
        time: '30分钟前',
        type: 'warning'
      },
      {
        content: '新增设备 "压力传感器-003"',
        time: '1小时前',
        type: 'primary'
      }
    ])

    const alarmList = ref([
      {
        device: '温度传感器-001',
        type: 'error',
        content: '温度超出阈值',
        time: '2024-03-18 10:30:00'
      },
      {
        device: '湿度传感器-002',
        type: 'warning',
        content: '湿度接近预警值',
        time: '2024-03-18 10:25:00'
      }
    ])

    const initDeviceStatusChart = () => {
      deviceStatusChartInstance = echarts.init(deviceStatusChart.value)
      const option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            type: 'pie',
            radius: '50%',
            data: [
              { value: 98, name: '在线' },
              { value: 25, name: '离线' },
              { value: 5, name: '故障' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
      deviceStatusChartInstance.setOption(option)
    }

    const initDataTrendChart = () => {
      dataTrendChartInstance = echarts.init(dataTrendChart.value)
      const option = {
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: 'line',
            smooth: true
          }
        ]
      }
      dataTrendChartInstance.setOption(option)
    }

    const handleResize = () => {
      deviceStatusChartInstance?.resize()
      dataTrendChartInstance?.resize()
    }

    onMounted(() => {
      initDeviceStatusChart()
      initDataTrendChart()
      window.addEventListener('resize', handleResize)
    })

    onUnmounted(() => {
      // 添加DOM存在性检查
      if (deviceStatusChart.value && document.contains(deviceStatusChart.value)) {
        deviceStatusChartInstance?.dispose()
      }
      if (dataTrendChart.value && document.contains(dataTrendChart.value)) {
        dataTrendChartInstance?.dispose()
      }
      window.removeEventListener('resize', handleResize)
    })

    return {
      statistics,
      recentActivities,
      alarmList,
      deviceStatusChart,
      dataTrendChart,
      trendTimeRange
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-container {
  padding: 20px;

  .mt-20 {
    margin-top: 20px;
  }

  .statistics-card {
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;

      .title {
        font-size: 16px;
        color: #606266;
      }

      .icon {
        font-size: 24px;
      }
    }

    .card-body {
      margin-bottom: 20px;

      .number {
        font-size: 24px;
        font-weight: bold;
        color: #303133;
      }

      .unit {
        font-size: 14px;
        color: #909399;
        margin-left: 4px;
      }
    }

    .card-footer {
      display: flex;
      align-items: center;
      font-size: 14px;

      .trend {
        display: flex;
        align-items: center;
        margin-right: 8px;

        &.up {
          color: #67C23A;
        }

        &.down {
          color: #F56C6C;
        }
      }

      .compare {
        color: #909399;
      }
    }
  }

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
</style> 